<script setup>
  import {ref} from 'vue'
  import { User, Lock } from '@element-plus/icons-vue'
  const loginRef  = ref()
  const isBoolean = ref(false)
  import {useRouter} from 'vue-router'
  const formLogin = ref({
    username:'',
    password:'',
    repassword:''
  })
  const rules = {
    username:[
      {required:true,message:'请输入用户名',trigger:'blur'},
      {min:5,max:10,message:'用户名长度在5到10个字符',trigger:'blur'}
    ],
    password:[
      {required:true,message:'请输入密码',trigger:'blur'},
      {min:6,max:12,message:'密码长度在6到12个字符',trigger:'blur'},
    ],
    repassword:[
      {required:true,message:'请再次输入密码',trigger:'blur'},
      {pattern:/^\S{6,15}$/,message:'密码至少6个字符，最多15个字符，且不能出现空格',trigger:'blur'},
      {
        validator:(rule,value,callback) =>{
          if(value != formLogin.value.password){
            callback('两次输入的密码不一致')
          }else{
            callback()
          }
        },
        trigger:'blur'
      }
    ]

  }

  const router = useRouter()
  const login = () =>{
    router.push('/login')
  }

  const register = async () => {
    await formLogin.value.validate()
    await userRegisterService(formLogin.value)
    ElMessage.success('注册成功')
  }

</script>
<template>
  <div class="register">
    <el-card class="card" shadow="always" style="width: 480px">
      <el-form :model="formLogin" :rules="rules" ref="loginRef">
        <h3>注册</h3>
        <el-form-item prop="username">
          <el-input placeholder="请输入用户名" v-model="formLogin.username" :prefix-icon="User"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input placeholder="请输入密码" v-model="formLogin.password" :prefix-icon="Lock" type="password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="repassword">
          <el-input placeholder="请再次输入密码"  v-model="formLogin.repassword" :prefix-icon="Lock" type="password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <div class="flex">
            <el-checkbox>我已阅读并同意<a href="#">用户协议</a></el-checkbox>
            <el-link @click="login">登录</el-link>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="margin: 0 auto;" :disabled="isBoolean" @click="register">注册</el-button>
        </el-form-item>

      </el-form>
    </el-card>

  </div>
</template>
<style lang="scss" scoped>
  .register{
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    .flex{
      width: 100%;
      display: flex;
      justify-content: space-between;
    }

  }

</style>
